<template>
	<view class="zh-auth-certify-detail">
		<image :src="IMG_URL + '/auth/banner.png'" class="banner"/>
		<view class="flow">
			<view class="zh-flow display-flex justify-between align-center">
				<view class="item" :class="{'active':shopInfoData.detail.status === IsItCertified.noSubmit}">
					<text class="font-24">填写信息</text>
				</view>
				<view class="line flex"></view>
				<view class="item" :class="{'active':shopInfoData.detail.status === IsItCertified.waitAudit}">
					<text class="font-24">等待审批</text>
				</view>
				<view class="line flex"></view>
				<view class="item"  :class="{'active':(shopInfoData.detail.status === IsItCertified.agree || shopInfoData.detail.status === IsItCertified.reject)}">
					<text class="font-24">认证结果</text>
				</view>
			</view>
		</view>
		
		<view class="status" v-if="shopInfoData.detail.status == IsItCertified.waitAudit">
			<image :src="IMG_URL + '/status/wait.png'" class="wait"/>
			<text class="status-des font-30">资料审核中！</text>
			<text class="des font-26 font-1769ff">请您耐心等候，我们将在72小时内完成审批</text>
		</view>
		<view class="status" v-if="shopInfoData.detail.status == IsItCertified.agree">
			<image :src="IMG_URL + '/status/success.png'" class="success"/>
			<text class="status-des font-30">恭喜您！公司认证已通过</text>
			<view @click="openCertifyMes">
				<text class="des font-26 font-2CB526 text-decoration">查看公司认证信息</text>
			</view>
			
		</view>
		<view>
		</view>
		<view class="status" v-if="shopInfoData.detail.status == IsItCertified.reject">
			<image :src="IMG_URL + '/status/error.png'" class="error"/>
			<text class="status-des font-30">抱歉，您的公司认证不通过</text>
			<view class="des-box">
				<text class="des1 font-28 font-EC1010">不通过原因</text>
				<text class="des2 font-26 display-block">{{ shopInfoData.detail.reject || '无' }}</text>
			</view>
		</view>
		<view class="error-btn" v-if="shopInfoData.detail.status == IsItCertified.reject">
			<button class="app-danger-button" hover-class="app-danger-button-active" @click="redirectTo('/pages/auth/certify?type=reApply')">重新申请企业认证</button>
		</view>
		<view class="section" v-if="certifyMesShow">
			<view class="top display-flex justify-between align-center">
				<view class="font-1769ff font-32 font-bold">
					<text>提交的审核资料</text>
				</view>
			</view>
			<view class="content">
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">业务类型</text>
					</view>
					<view>
						<view>
							<text>{{ getBusiness }}</text>
						</view>
					</view>
				</view>
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">详细信息</text>
					</view>
					<view>
						<view>
							<text class="font-999 label-width display-inline">注册名称：</text>
							<text>{{ shopInfoData.detail.allname }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999 label-width display-inline">企业税号：</text>
							<text>{{ shopInfoData.detail.qtaxnum }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999 label-width display-inline">企业法人：</text>
							<text>{{ shopInfoData.detail.qlegalperson }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999 label-width display-inline">企业地址：</text>
							<text>{{ shopInfoData.pickAreaStr }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999 label-width display-inline">详细街道：</text>
							<text>{{ shopInfoData.detail.alladdrfull }}</text>
						</view>
					</view>
				</view>
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">银行信息</text>
					</view>
					<view>
						<view>
							<text class="font-999 label-width display-inline">开户银行：</text>
							<text>{{ shopInfoData.detail.allbankname }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999 label-width display-inline">银行账号：</text>
							<text>{{ shopInfoData.detail.allbankaccount }}</text>
						</view>
					</view>
				</view>
				<view class="item display-flex font-26">
					<view class="name">
						<text class="font-bold">联系人信息</text>
					</view>
					<view>
						<view>
							<text class="font-999 label-width display-inline">姓名：</text>
							<text>{{ shopInfoData.detail.allpeople }}</text>
						</view>
						<view class="mt-15">
							<text class="font-999 label-width display-inline">手机号：</text>
							<text>{{ shopInfoData.detail.allphone1 }}</text>
						</view>
					</view>
				</view>
				<view class="item font-26">
					<view class="name">
						<text class="font-bold">资料信息</text>
					</view>
					<view class="display-flex mt-15 justify-between">
						<view class="flex" >
							<text>营业执照影印件</text>
							<image :src="previewImgs.qbusinesslicence" class="preview-img"/>
						</view>
						<view class="flex">
							<text>开票资料</text>
							<image :src="previewImgs.allinvoicei" class="preview-img"/>
						</view>
						<view class="flex">
							<text>授权书</text>
							<image :src="previewImgs.qauthbook" class="preview-img"/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { auth, fileApi } from'@/api'
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { reactive, computed, ref } from 'vue';
	import { util } from '@/utils'
	import { IsItCertified } from '@/enum/user'
	import { useAuthStore } from '@/store/auth'
	import { IMG_URL } from '@/utils/constant'
	const authStore = useAuthStore()
	
	const certifyMesShow = ref(false)
	const bussiness = ref('')
	const shopInfoData:any = reactive({
		detail: {
			allname:'',
			qtaxnum:'',
			qlegalperson:'',
			allbankname:'',
			allbankaccount:'',
			alladdr1:'',
			alladdr2:'',
			alladdr3:'',
			isbusiness:'',
			isbuyer:'',
			isagent:'',
			ishuodai:'',
			isopcer:'',
			isstorage:'',
			issell:'',
			allinvoicei:'',
			qauthbook:'',
			qbusinesslicence:''
		},
		pickAreaStr:'',
	})
	
	const previewImgs:any = reactive({
		allinvoicei:'',
		qauthbook:'',
		qbusinesslicence:''
	})
	
	onLoad(() => {
		shopInfo()
	})
	
	onPullDownRefresh(() => {
		authStore.setUserInfo().then(() => {
			shopInfo()
			setTimeout(function () {
				uni.stopPullDownRefresh()
			}, 1000)
		})
	})
	
	const shopInfo = () => {
		auth.getShopInfo().then(((res:any) => {
			const data = res.data
			shopInfoData.detail = data
			const areaArr = util.getArea(data.alladdr1,data.alladdr2,data.alladdr3)
			shopInfoData.pickAreaStr = areaArr[0] + areaArr[1] + areaArr[2]
			const arr = [data.allinvoicei, data.qauthbook, data.qbusinesslicence]
			if(data.status == IsItCertified.agree) {
				fileUrl(arr)
			}
		}))
	}
	
	const getBusiness = computed(() => {
		let str = ''
		if(shopInfoData.detail.isbusiness === '1') {
			str = str + '商城卖家、'
		}
		if(shopInfoData.detail.isbuyer === '1') {
			str = str + '商城买家、'
		}
		if(shopInfoData.detail.isopcer === '1') {
			str = str + '开证公司、'
		}
		if(shopInfoData.detail.isagent === '1') {
			str = str + '国外代理、'
		}
		if(shopInfoData.detail.ishuodai === '1') {
			str = str + '货代公司、'
		}
		if(shopInfoData.detail.isstorage === '1') {
			str = str + '仓储公司、'
		}
		if(shopInfoData.detail.iscustom === '1') {
			str = str + '业务客户、'
		}
		str = str.substring(0, str.length - 1)
		return str
	})
	
	const fileUrl = (arr:any) => {
		fileApi.getFileUrl(arr).then((res:any) => {
			const data = res.data
			previewImgs.allinvoicei = data[shopInfoData.detail.allinvoicei]
			previewImgs.qauthbook = data[shopInfoData.detail.qauthbook]
			previewImgs.qbusinesslicence = data[shopInfoData.detail.qbusinesslicence]
		})
	}
	
	const openCertifyMes = () => {
		certifyMesShowChange()
	}
	
	const certifyMesShowChange = () => {
		certifyMesShow.value = !certifyMesShow.value
	}
	
	const redirectTo = (url:string) => {
		uni.redirectTo({url:url})
	}
	
</script>

<style lang="scss" scoped>
	.zh-auth-certify-detail {
		padding-bottom:150rpx;
		.banner {
			width:100%;
			height:164rpx;
		}
		.flow {
			margin:48rpx 80rpx;
			.zh-flow {
				padding-bottom: 40rpx;
				.line {
					background-color: $uni-color-primary;
					height:1rpx;
				}
				.item {
					width: 14rpx;
					height: 14rpx;
					box-sizing: border-box;
					background-color: #fff;
					border:1rpx solid $uni-color-primary;
					border-radius: 50%;
					position:relative;
					&.active {
						width:38rpx;
						height: 38rpx;
						background-color: #fff;
						border:11rpx solid $uni-color-primary;
					}
					text {
						position: absolute;
						white-space:nowrap;
						transform: translateX(-40%);
						margin-top: 40rpx;
					}
				}
			}
		}
		.status {
			background-color: $uni-bg-card-color;
			text-align: center;
			padding:82rpx 0;
			.wait {
				width: 154rpx;
				height: 187rpx;
			}
			.success {
				width:172rpx;
				height: 177rpx;
			}
			.error {
				width:149rpx;
				height: 149rpx;
			}
			.status-des {
				margin-top: 24rpx;
				display:block;
				font-weight: bold;
			}
			.des {
				 margin-top: 68rpx;
				 display:block;
			}
			.des-box {
				background-color: #FFF8F8;
				padding:45rpx 146rpx;
				text-align: left;
				margin:40rpx 30rpx;
				.des1 {
					text-align: left;
				}
				.des2 {
					margin-top:30rpx;
				}
			}
		}
		.error-btn {
			margin-top: 77rpx;
		}
		.section {
			background-color: $uni-bg-card-color;
			padding:30rpx 30rpx 0;
			margin-top: 20rpx;
			.label-width {
				width:140rpx;
			}
			.top {
				padding-bottom: 30rpx;
				.name {
					display:inline-block;
					width: 160rpx;
				}
				.audit-icon {
					width: 26rpx;
					height: 26rpx;
				}
			}
			.content {
				.item:nth-child(n + 1) {
					border-top: 1rpx solid $uni-border-color;
				}
				.item {
					padding:30rpx 0;
					.name {
						width: 160rpx;
					}
					.preview-img {
						width: 215rpx;
						height: 215rpx;
						margin-top: 30rpx;
						border: 1px solid #E5E5E5;
						border-radius: 10px;
					}
				}
			}
		}
	}
</style>
